<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
        html,body{
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<script type="text/javascript">
    window.onload=function(){
      console.log(111232113)
    }
</script>
<body>
    <div style="height:2000px"></div>
</body>
<script>

    ScrollBackGround('test.jpg')

    function ScrollBackGround(src,options){
        if(!options) options = {};
        let showAreaP = options.showAreaP || 0.618;
        let imgw = 100;
        let imgh = 100;

        let img = new Image();
        img.src = src;
        img.onload = function(){
            imgw = img.width;
            imgh = img.height;
            scroll();
            img.onload = undefined;
        }

        document.body.style.backgroundImage = 'url("'+ src + '")';
        document.body.style.backgroundAttachment = 'fixed';

        document.addEventListener('scroll',scroll)
        function scroll(){
            console.log('scroll!',imgw,imgh)
            let p = document.body.scrollTop / (document.body.scrollHeight - document.body.clientHeight);

            let bodyh = document.body.clientHeight;
            let bodyw = document.body.clientWidth;

            let imgH,imgW;

            imgH = bodyh / showAreaP;
            imgW = imgw * imgH / imgh;
            if(imgW < bodyw){
                imgW = bodyw;
                imgH = imgh * imgW / imgw;
            }

            document.body.style.backgroundSize = `${imgW}px`;
            document.body.style.backgroundPosition = `${bodyw/2 - imgW/2}px ${- imgH * (1 - showAreaP) * p}px`;
        }
    }

</script>
</html>
